<template>

  <div>
    <div class="payBank">
      <header>
        <img src="../assets/fanhui.png" alt="" onclick="history.go(-1)">
        <p>京东支付</p>
        <!--<img src="../assets/weiti.png" alt="" @click="CommonProblem()">-->
        <p></p>
      </header>
      <ul>
        <li style="overflow: hidden"><span>卡类型</span><span v-model="card_type" style="color:#666666;font-weight: 400;font-size:1.3rem">借记卡</span><span style="text-align: right;float: right"><img
          src="../assets/gengduo.png" alt="" style="width: 1rem;height: 1rem;"></span></li>
        <li @click="PaymentBankCard()" style="overflow: hidden"><span>付款银行卡</span><span style="width: auto;color:#666666;font-weight:400;font-size: 1.3rem">{{bank_name}}({{bank_code.split(-2,4).toString()}})</span><span style="text-align: right;float: right;width: auto"><img
          src="../assets/gengduo.png" alt="" style="width: 1rem;height: 1rem"></span></li>
        <!--<li><span>银行卡有效期</span><span><input type="text" placeholder="信用卡必填 例: 12/21" v-model="expired_at"></span></li>-->
        <!--<li><span>银行卡校验码</span><span><input type="text" placeholder="请输入信用卡背面后三位签名" style="width: 17rem"></span></li>-->
      </ul>
    </div>
    <div class="empty"></div>
    <div class="payInfor">
      <ul>
        <li><span>持卡人姓名</span><span><input type="text" placeholder="请输入持卡人姓名" v-model="card_name"></span></li>
        <li><span>身份证号</span><span><input type="text" placeholder="仅支持中国大陆居民身份证" v-model="card_idno"></span></li>
        <li><span>预留手机</span><span><input type="text" placeholder="请输入银行预留手机号" v-model="card_phone"></span></li>
        <li><span>验证码</span><span><input type="text" placeholder="6位短信验证码" v-model="trade_code"></span><span
          style="color:#32D69C;text-align: center;border-left: 1px solid #eeeeee;display:inline-block;position: relative;left: 2rem"
           @click="SendAuthenticationCode()">发送验证码</span></li>
      </ul>
    </div>


    <div class="divs" v-show="payShow">
      <div class="bankInfor">
        <ul>
          <li style="display: flex;"><span style="font-size: 3rem;font-weight: 200;color: #999999" @click="closeBankList()">×</span><span>选择银行卡</span><span></span></li>
          <!--<li>购买<span>{{transAssessmentFee}}</span>元的购买额度卡</li>-->
          <li v-for="(item,index) in bankArr[0]" @click="getBankInfor(index)"><span v-show="false" ref="menuIds">{{item.bank_card_id}}</span><span ref="menuImg"><img
            :src="item.card_img" alt=""></span><span
            ref="menuNames">{{item.bank_name}}</span>(<span ref="menuCodes">{{item.bank_code.slice(-4)}}</span>)</li>
          <li @click="addNewBankCard()"><span><img src="../assets/newCard.png" alt=""></span><span>使用新的银行卡</span><span style="text-align: right;float: right;margin-right: 5rem"><img
            src="../assets/gengduo.png" alt="" style="width: 1.2rem;height: 1.5rem;"></span></li>
          <li style="font-size: 0"></li>
        </ul>
        <!--<ul v-for="(item,index) in bankArr[0]" @click="getBankInfor(index)">-->
        <!--&lt;!&ndash;<li ><span v-show="false" ref="menuId">{{item.bank_card_id}}</span><span ref="menuName">{{item.bank_name}}</span></li>&ndash;&gt;-->
        <!--</ul>-->
      </div>
    </div>


    <div class="payBtn">
      <button @click="payMoney()">支付</button>
    </div>


    <div id="divs" v-show="customMoneyShow">
      <div class="ShowWarn" v-show="CreditAssessmentFee">
        <p>提示</p>
        <p style="line-height: 2rem;margin-top: -2rem">{{message}}</p>
        <p @click="RationalConsumption()">确定</p>
      </div>
    </div>



  </div>
</template>

<script>
  import axios from 'axios'

  export default {

    name: 'pay',

    data() {
      return {
        payTocken: '',
        message:'',
        // 显示银行卡列表
        payShow: false,
        // 有效期
        order_id: this.$route.query.order_id,
        // 银行卡信息
        bankArr: [],
        bank_code: '',
        bank_name: '',
        card_img: '',
        bank_card_id: '',
        card_type: '',
        card_name: '',
        card_idno: '',
        card_phone: '',
        trade_code: '',
        // transAssessmentFee:this.$route.query.transAssessmentFee,
        payWarning:false,
        customMoneyShow:false,
        CreditAssessmentFee:true,
        codes:'',
      }
    },
    created() {
      // 获取银行卡列表
      var that = this;
      console.log(that.order_id)
      that.payTocken = sessionStorage.getItem('AuthToken');
      axios.get('http://test.zjapi.xianxiangle.com/user/bank_card_list?AuthToken=' + that.payTocken,).then(function (res) {
        that.bankArr.push(res.data.data);
        console.log(res.data.data)
        console.log(res.data.data[0]);
        that.bank_card_id = res.data.data[0].bank_card_id;
        that.bank_name = res.data.data[0].bank_name;
        that.bank_code = (res.data.data[0].bank_code).slice(-4);
        that.card_img = res.data.data[0].card_img;
      }).catch(function (err) {

      })
    },
    methods: {
      // 点击发送验证码
      SendAuthenticationCode() {
        console.log(111)
        var that = this;
        axios.post('http://test.zjapi.xianxiangle.com/jdpay/credit_cards_sign', {
          AuthToken: that.payTocken,
          order_id: that.order_id,    //[string] order_id
          bank_id: that.bank_card_id,   //[string] 用户绑定银行卡id
          card_type:'D',    //[string] 卡类型 如：信用卡：C 借记卡：D
          card_name: that.card_name, //[string] 持卡人姓名
          card_idno: that.card_idno, //[string] 持卡人身份证号
          card_phone:that.card_phone //[string] 预留手机号
        }).then(function (res) {
          console.log(res.data)
          that.customMoneyShow=true;
          that.message=res.data.message;

        }).catch(function (err) {

        })
      },
      // 确定提示框消失
      payWarningSure(){
        var that=this;
        that.payWarning=false
      },
      PaymentBankCard() {
        var that = this;
        that.payShow = true
      },
      realPay() {
        var that = this;
        that.payShow = false
      },
      // 获取银行卡信息
      getBankInfor(index) {
        var that = this;
        console.log(that.$refs.menuIds[index].innerText)
        // console.log(that.$refs.menuImg[index].src)
        console.log(that.$refs.menuNames[index].innerText)
        console.log(that.$refs.menuCodes[index].innerText)
        that.bank_card_id = that.$refs.menuIds[index].innerText;
        that.bank_name = that.$refs.menuNames[index].innerText;
        that.bank_code = that.$refs.menuCodes[index].innerText;
        that.card_img=that.$refs.menuImg[index].src
        that.payShow = false
        // console.log(that.bank_card_id);
        // console.log(that.bank_name);
        // console.log(that.card_img);
        // console.log(that.bank_code);
      },

      closeBankList(){
        this.payShow = false
      },

      // 添加银行卡
      addNewBankCard(){
        var that=this;
        that.$router.push({path:'/jumpBankCard'})

      },
      // 支付
      payMoney(){
        var that=this;
        // that.$router.push({path:'/myCenter'})
        axios.post('http://test.zjapi.xianxiangle.com/jdpay/credit_cards_pay', {
          AuthToken: that.payTocken,
          order_id: that.order_id,    //[string] order_id
          bank_id: that.bank_card_id,   //[string] 用户绑定银行卡id
          card_type:'D',    //[string] 卡类型 如：信用卡：C 借记卡：D
          card_name: that.card_name, //[string] 持卡人姓名
          card_idno: that.card_idno, //[string] 持卡人身份证号
          card_phone:that.card_phone, //[string] 预留手机号
          trade_code:that.trade_code    //短信验证码
        }).then(function (res) {
          console.log(res.data)
          console.log(res.data.code)
          that.codes=res.data.code;
          that.customMoneyShow=true;
          that.message=res.data.message;
        }).catch(function (err) {

        })

      },
      RationalConsumption(){
        var that=this;
        that.customMoneyShow=false
        if(that.codes==0){
          that.$router.push({path:'/first'})
        }
      },
    },
//   components: {
//     AppHeader
//   }
  }
</script>

<style lang="scss" scoped>
  * {
    text-align: left;
  }
  #divs{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    position: absolute;
    left: 0;
    top: 0;

    .ShowWarn{
      width: 86%;
      height:15rem;
      background: white;
      /*border: 1px solid red;*/
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      border-radius: 1rem;
      p:nth-child(1){
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
        padding: 1rem 0 1rem 0;
      }
      p:nth-child(2){
        font-size: 1.3rem;
        text-align: center;
        padding: 2rem 0 1rem 0;
      }
      p:nth-child(3){
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        border-top: 1px solid #cccccc;
        font-size: 1.3rem;
        text-align: center;
        padding: 1rem 0 1rem 0;
        position: absolute;
        bottom: 0;
        left: 0;
        color: #528CE0;
      }

    }
  }
  header{
    width: 100%;
    height: auto;
    /*height: 3rem;*/
    display: flex;
    justify-content: space-between;
    //padding: 1rem;
    background: white;
    border-bottom: 1px solid #e3e3e3;
    padding:0.5rem 0 0.5rem 0;
    img{
      width: 1.4rem;
      height: 2rem;
      padding: 0.4rem;
      margin-left: 1rem;
    }
    p{
      font-size: 1.8rem;
      color: #333333;
      text-align: center;
      position: relative;
      left: 1rem;
    }
    img:nth-child(3){
      width: 2rem;
      height: 2rem;
      position: relative;
      left: 2rem;
    }
  }
  .divs {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    .bankInfor {
      width: 100%;
      height: auto;
      background: white;
      /*border: 1px solid red;*/
      position: absolute;
      bottom: 0;
      left: 0;
      /*border-radius: 1rem;*/
      overflow: hidden;
      img{
        width: 2rem;
        height: 2rem;
        position: relative;
        top: 0.5rem;
      }

      ul {
        width: 100%;
        list-style: none;

        li {
          width: 100%;
          height: 2.6rem;
          line-height: 2.6rem;
          padding: 1rem 0 1rem 0;
          font-size: 1.3rem;
          padding-left: 2rem;
          border-top: 1px solid #eeeeee;
          text-align: left;
        }
        li:nth-child(1) {
          text-align: center;
          border-top: 0;
          font-size: 1.6rem;
          /*padding: 0.5rem 0 0.5rem 0;*/
          font-weight: 900;
          span{
            width: 30%;
          }
        }

      }
    }
    p {
      width: 100%;
      height: 4rem;
      line-height: 4rem;
      /*position: absolute;*/
      /*left: 0;*/
      /*bottom: 0;*/
      background: #eeeeee;
      color: #ff9d00;
      border-radius: 0 0 1rem 1rem;
      text-align: center;
    }
  }

  .payBank {
    width: 100%;
    height: auto;
    ul {
      width: 90%;
      height: auto;
      list-style: none;
      li {
        width: 100%;
        height: 2.6rem;
        line-height: 2.6rem;
        padding: 1rem 0 1rem 0;
        font-weight: 900;
        font-size: 1.2rem;
        border-bottom: 1px solid #cccccc;
        &:nth-last-child(1) {
          border-bottom: 0;
        }
        span:nth-child(1) {
          font-size: 1.4rem;
        }
        span {
          width: 30%;
          /*border: 1px solid;*/
          display: inline-block;
          input {
            outline: none;
            border: 0;
          }
        }
      }
    }
  }

  .empty {
    width: 100%;
    height: 1rem;
    background: #eeeeee;
  }

  .payInfor {
    width: 100%;
    height: auto;
    ul {
      width: 90%;
      height: auto;
      list-style: none;
      li {
        width: 100%;
        height: 2.6rem;
        line-height: 2.6rem;
        padding: 1rem 0 1rem 0;
        font-size: 1.2rem;
        font-weight: 900;
        color: #666666;
        border-bottom: 1px solid #cccccc;
        &:nth-last-child(1) {
          border-bottom: 0;
        }
        span:nth-child(1) {
          font-size: 1.4rem;
        }
        span {
          width: 30%;
          /*border: 1px solid;*/
          display: inline-block;
          input {
            outline: none;
            border: 0;
            color: #666666;
          }
        }
      }
    }
  }

  .payBtn {
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 3rem;
    button {
      width: 86%;
      height: 3rem;
      line-height: 3rem;
      font-size: 1.6rem;
      border-radius: 5rem;
      border: 0;
      outline: none;
      text-align: center;
      background: #32D69C;
      color: white;
    }
  }
</style>
